<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue'
const charts = ref()
const option = {
  tooltip: {
    trigger: 'item'
  },
  grid:{
    left:0,
    top:0,
    bottom:0,
    right:0
  },
  legend: {
    bottom: '30%',
    right: '20px',
    orient:'vertical',
    textStyle:{
      color:'white',
      fontSize:14
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        position: 'inside'
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '吃' },
        { value: 735, name: '喝' },
        { value: 580, name: '拉' },
        { value: 484, name: '撒' },
        { value: 300, name: '睡' }
      ]
    }
  ]
};
onMounted(()=>{
  const myCharts = echarts.init(charts.value)
  myCharts.setOption({...option})
})
</script>

<template>
  <div class="age-container">
    <div class="age-tit">
      <p class="tit">年龄比例</p>
      <p class="bg"></p>
    </div>
    <div class="charts" ref="charts">
    </div>
  </div>
</template>

<style scoped lang="scss">
.age-container{
  background: url("../../images/dataScreen-main-cb.png") no-repeat;
  background-size: cover;
  .age-tit{
    margin-left: 20px;
    .tit{
      color: white;
      font-size: 20px;
      margin:10px 0;
    }
    .bg{
      width: 68px;
      height: 7px;
      background: url("../../images/dataScreen-title.png");
    }
  }
  .charts{
    height: 100%;
  }
}
</style>